<template>
  <view class="container" @click="closeDropdowns">
    <view class="header">
      <text class="title">沙扒湾酒店</text>
      <view class="search-box">
        <image src="/static/搜索.png" class="search-icon"></image>
        <input type="text" placeholder="搜索酒店" confirm-type="search" v-model="searchText" @confirm="searchHotels" />
      </view>
    </view>
    
    <!-- 筛选选项 -->
    <view class="filter-section">
      <view class="dropdown-filters">
        <!-- 价格筛选下拉 -->
        <view class="dropdown-filter">
          <view class="dropdown-header" @click.stop="toggleDropdown('price')">
            <text class="dropdown-label">{{getPriceRangeText()}}</text>
            <image class="dropdown-arrow" src="/static/下拉.png" :class="{'arrow-up': isPriceDropdownOpen}"></image>
          </view>
          <view class="dropdown-content" v-if="isPriceDropdownOpen" @click.stop>
            <view class="dropdown-item" :class="{'active': priceRange === 'all'}" @click="filterByPrice('all')">
              全部价格
            </view>
            <view class="dropdown-item" :class="{'active': priceRange === 'low'}" @click="filterByPrice('low')">
              ¥0-200
            </view>
            <view class="dropdown-item" :class="{'active': priceRange === 'medium'}" @click="filterByPrice('medium')">
              ¥200-500
            </view>
            <view class="dropdown-item" :class="{'active': priceRange === 'high'}" @click="filterByPrice('high')">
              ¥500+
            </view>
          </view>
        </view>
        
        <!-- 星级筛选下拉 -->
        <view class="dropdown-filter">
          <view class="dropdown-header" @click.stop="toggleDropdown('star')">
            <text class="dropdown-label">{{getStarLevelText()}}</text>
            <image class="dropdown-arrow" src="/static/下拉.png" :class="{'arrow-up': isStarDropdownOpen}"></image>
          </view>
          <view class="dropdown-content" v-if="isStarDropdownOpen" @click.stop>
            <view class="dropdown-item" :class="{'active': starLevel === 'all'}" @click="filterByStar('all')">
              全部星级
            </view>
            <view class="dropdown-item" :class="{'active': starLevel === '3'}" @click="filterByStar('3')">
              经济型
            </view>
            <view class="dropdown-item" :class="{'active': starLevel === '4'}" @click="filterByStar('4')">
              舒适型
            </view>
            <view class="dropdown-item" :class="{'active': starLevel === '5'}" @click="filterByStar('5')">
              豪华型
            </view>
          </view>
        </view>
        
        <!-- 排序下拉 -->
        <view class="dropdown-filter">
          <view class="dropdown-header" @click.stop="toggleDropdown('sort')">
            <text class="dropdown-label">{{getSortText()}}</text>
            <image class="dropdown-arrow" src="/static/下拉.png" :class="{'arrow-up': isSortDropdownOpen}"></image>
          </view>
          <view class="dropdown-content" v-if="isSortDropdownOpen" @click.stop>
            <view class="dropdown-item" :class="{'active': sortType === 'default'}" @click="sortBy('default')">
              默认排序
            </view>
            <view class="dropdown-item" :class="{'active': sortType === 'price-asc'}" @click="sortBy('price-asc')">
              价格从低到高
            </view>
            <view class="dropdown-item" :class="{'active': sortType === 'price-desc'}" @click="sortBy('price-desc')">
              价格从高到低
            </view>
            <view class="dropdown-item" :class="{'active': sortType === 'rating'}" @click="sortBy('rating')">
              评分优先
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 酒店列表 -->
    <view class="hotels-list">
      <view class="hotel-card" v-for="(item, index) in hotelsList" :key="item.id" 
            :class="['card-anim']" 
            :style="{animationDelay: index * 0.05 + 's'}"
            @click="goToDetail(item.id)">
        <image class="hotel-image" :src="item.coverImage" mode="aspectFill"></image>
        <view class="hotel-info">
          <view class="hotel-name-row">
            <text class="hotel-name">{{item.name}}</text>
            <text class="hotel-price">¥<text class="price-num">{{item.price}}</text>起</text>
          </view>
          <view class="hotel-tags">
            <text class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{tag}}</text>
          </view>
          <text class="hotel-address">{{item.address}}</text>
          <view class="hotel-features">
            <text class="feature-item" v-for="(feature, featureIndex) in item.features" :key="featureIndex">{{feature}}</text>
          </view>
          <view class="hotel-rating">
            <text class="rating-score">{{item.rating}}分</text>
            <text class="rating-desc">{{getRatingDesc(item.rating)}}</text>
            <text class="review-count">{{item.reviewCount}}条点评</text>
          </view>
        </view>
      </view>
      
      <view class="empty-tips" v-if="hotelsList.length === 0 && !isLoading">
        暂无符合条件的酒店
      </view>
    </view>
    
    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore && !isLoading">
      <text @click="loadMore">加载更多</text>
    </view>
    <view class="loading" v-if="isLoading">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
// 静态酒店数据
const staticHotels = [
  {
    id: '1',
    name: '沙扒湾海景度假酒店',
    coverImage: '/static/图片.jpg',
    price: 388,
    tags: ['海景', '度假', '含早'],
    address: '沙扒湾海滨大道128号',
    features: ['免费WiFi', '停车场', '健身房', '泳池'],
    rating: 4.7,
    reviewCount: 862,
    priceRange: 'medium',
    starLevel: '4'
  },
  {
    id: '2',
    name: '沙扒湾豪华海滨别墅',
    coverImage: '/static/图片.jpg',
    price: 688,
    tags: ['别墅', '私人沙滩', '含早'],
    address: '沙扒湾度假区A区12号',
    features: ['免费WiFi', '私人泳池', '厨房', '烧烤设施'],
    rating: 4.9,
    reviewCount: 345,
    priceRange: 'high',
    starLevel: '5'
  },
  {
    id: '3',
    name: '沙扒湾经济型连锁酒店',
    coverImage: '/static/图片.jpg',
    price: 168,
    tags: ['经济', '干净', '近商圈'],
    address: '沙扒湾中心商业区45号',
    features: ['免费WiFi', '空调', '电视', '热水'],
    rating: 4.2,
    reviewCount: 1254,
    priceRange: 'low',
    starLevel: '3'
  },
  {
    id: '4',
    name: '沙扒湾风情民宿',
    coverImage: '/static/图片.jpg',
    price: 198,
    tags: ['民宿', '特色', '安静'],
    address: '沙扒湾老渔村18号',
    features: ['免费WiFi', '厨房用具', '观景阳台'],
    rating: 4.5,
    reviewCount: 578,
    priceRange: 'low',
    starLevel: '3'
  },
  {
    id: '5',
    name: '沙扒湾商务酒店',
    coverImage: '/static/图片.jpg',
    price: 298,
    tags: ['商务', '会议', '含早'],
    address: '沙扒湾商务中心区56号',
    features: ['免费WiFi', '会议室', '健身房', '餐厅'],
    rating: 4.4,
    reviewCount: 762,
    priceRange: 'medium',
    starLevel: '4'
  },
  {
    id: '6',
    name: '沙扒湾豪华度假酒店',
    coverImage: '/static/图片.jpg',
    price: 588,
    tags: ['豪华', '度假', '含早'],
    address: '沙扒湾海滨大道256号',
    features: ['免费WiFi', '健身房', '泳池', 'SPA'],
    rating: 4.8,
    reviewCount: 658,
    priceRange: 'high',
    starLevel: '5'
  }
];

// 导入模糊搜索工具
import searchUtils from '../../utils/search.js';

export default {
  data() {
    return {
      searchText: '',
      hotelsList: [],
      allHotels: staticHotels,
      priceRange: 'all',
      starLevel: 'all',
      isLoading: false,
      hasMore: false,
      page: 1,
      limit: 10,
      isPriceDropdownOpen: false,
      isStarDropdownOpen: false,
      isSortDropdownOpen: false,
      sortType: 'default'
    }
  },
  onLoad() {
    this.isLoading = true;
    
    // 初始化数据
    setTimeout(() => {
      this.hotelsList = JSON.parse(JSON.stringify(staticHotels));
      this.isLoading = false;
      
      // 实际项目中，根据数据总数设置是否有更多
      this.hasMore = this.hotelsList.length >= this.limit;
    }, 800);
  },
  methods: {
    // 价格筛选
    filterByPrice(priceRange) {
      if (this.priceRange === priceRange) return;
      
      this.priceRange = priceRange;
      this.isPriceDropdownOpen = false; // 选择后关闭下拉
      this.applyFilters();
    },
    
    // 星级筛选
    filterByStar(starLevel) {
      if (this.starLevel === starLevel) return;
      
      this.starLevel = starLevel;
      this.isStarDropdownOpen = false; // 选择后关闭下拉
      this.applyFilters();
    },
    
    // 应用筛选条件
    applyFilters() {
      this.isLoading = true;
      
      setTimeout(() => {
        let filteredData = JSON.parse(JSON.stringify(staticHotels));
        
        // 价格筛选
        if (this.priceRange !== 'all') {
          filteredData = filteredData.filter(item => item.priceRange === this.priceRange);
        }
        
        // 星级筛选
        if (this.starLevel !== 'all') {
          filteredData = filteredData.filter(item => item.starLevel === this.starLevel);
        }
        
        // 搜索文本筛选（使用模糊搜索）
        if (this.searchText && this.searchText.trim() !== '') {
          filteredData = searchUtils.fuzzySearch(
            filteredData, 
            this.searchText, 
            ['name', 'address', 'tags', 'features']
          );
        }
        
        // 排序
        switch(this.sortType) {
          case 'price-asc':
            filteredData.sort((a, b) => a.price - b.price);
            break;
          case 'price-desc':
            filteredData.sort((a, b) => b.price - a.price);
            break;
          case 'rating':
            filteredData.sort((a, b) => b.rating - a.rating);
            break;
          default:
            // 默认排序，不做额外操作
            break;
        }
        
        this.hotelsList = filteredData;
        this.isLoading = false;
        this.hasMore = false; // 筛选后重置加载更多
      }, 500);
    },
    
    // 搜索酒店
    searchHotels() {
      this.applyFilters();
    },
    
    // 跳转到详情页
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/hotels/detail?id=${id}`
      });
    },
    
    // 加载更多
    loadMore() {
      if (this.isLoading || !this.hasMore) return;
      
      this.isLoading = true;
      this.page++;
      
      // 实际项目中这里应该请求更多数据
      setTimeout(() => {
        this.isLoading = false;
        this.hasMore = false; // 模拟没有更多数据了
      }, 800);
    },
    
    // 获取评分描述
    getRatingDesc(rating) {
      if (rating >= 4.7) return '极好';
      if (rating >= 4.3) return '很好';
      if (rating >= 4.0) return '不错';
      if (rating >= 3.5) return '一般';
      return '较差';
    },
    
    // 获取价格范围文本
    getPriceRangeText() {
      switch (this.priceRange) {
        case 'all':
          return '全部价格';
        case 'low':
          return '¥0-200';
        case 'medium':
          return '¥200-500';
        case 'high':
          return '¥500+';
        default:
          return '全部价格';
      }
    },
    
    // 获取星级文本
    getStarLevelText() {
      switch (this.starLevel) {
        case 'all':
          return '全部星级';
        case '3':
          return '经济型';
        case '4':
          return '舒适型';
        case '5':
          return '豪华型';
        default:
          return '全部星级';
      }
    },
    
    // 获取排序文本
    getSortText() {
      switch (this.sortType) {
        case 'default':
          return '默认排序';
        case 'price-asc':
          return '价格从低到高';
        case 'price-desc':
          return '价格从高到低';
        case 'rating':
          return '评分优先';
        default:
          return '默认排序';
      }
    },
    
    // 切换下拉菜单
    toggleDropdown(type) {
      if (type === 'price') {
        this.isPriceDropdownOpen = !this.isPriceDropdownOpen;
      } else if (type === 'star') {
        this.isStarDropdownOpen = !this.isStarDropdownOpen;
      } else if (type === 'sort') {
        this.isSortDropdownOpen = !this.isSortDropdownOpen;
      }
    },
    
    // 点击空白区域关闭下拉菜单
    closeDropdowns() {
      this.isPriceDropdownOpen = false;
      this.isStarDropdownOpen = false;
      this.isSortDropdownOpen = false;
    },
    
    // 排序
    sortBy(type) {
      this.sortType = type;
      this.isSortDropdownOpen = false; // 选择后关闭下拉
      this.applyFilters();
    }
  },
  onPullDownRefresh() {
    this.page = 1;
    this.hotelsList = [];
    this.applyFilters();
    
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 800);
  },
  onShareAppMessage() {
    return {
      title: '沙扒湾酒店住宿推荐',
      path: '/pages/hotels/index'
    }
  },
  onShareTimeline() {
    return {
      title: '沙扒湾酒店住宿推荐',
      query: '',
      imageUrl: '/static/图片.jpg'
    }
  }
}
</script>

<style>
.container {
  padding: 0 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.header {
  padding: 30rpx 0;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
  color: #333;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 40rpx;
  padding: 15rpx 25rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.search-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.search-box input {
  flex: 1;
  height: 40rpx;
  font-size: 28rpx;
}

.filter-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.dropdown-filters {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 15rpx;
}

.dropdown-filter {
  position: relative;
  margin-right: 20rpx;
  margin-bottom: 10rpx;
  min-width: 180rpx;
}

.dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  padding: 12rpx 20rpx;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.05);
}

.dropdown-label {
  font-size: 24rpx;
  color: #333;
}

.dropdown-arrow {
  width: 24rpx;
  height: 24rpx;
  transition: transform 0.3s ease;
}

.dropdown-arrow.arrow-up {
  transform: rotate(180deg);
}

.dropdown-content {
  position: absolute;
  top: calc(100% + 10rpx);
  left: 0;
  min-width: 100%;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 10rpx 0;
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
  z-index: 10;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  font-size: 24rpx;
  color: #666;
  padding: 15rpx 20rpx;
  transition: all 0.2s ease;
}

.dropdown-item:active {
  background-color: #f5f5f5;
}

.dropdown-item.active {
  background-color: rgba(18, 150, 219, 0.1);
  color: #1296db;
  font-weight: bold;
}

.hotels-list {
  margin-bottom: 30rpx;
}

.hotel-card {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  animation: fadeInUp 0.4s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hotel-image {
  width: 100%;
  height: 300rpx;
}

.hotel-info {
  padding: 20rpx;
}

.hotel-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.hotel-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.hotel-price {
  font-size: 24rpx;
  color: #ff6b6b;
}

.price-num {
  font-size: 36rpx;
  font-weight: bold;
}

.hotel-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15rpx;
}

.tag {
  font-size: 22rpx;
  color: #1296db;
  background-color: rgba(18, 150, 219, 0.1);
  padding: 6rpx 15rpx;
  border-radius: 20rpx;
  margin-right: 10rpx;
  margin-bottom: 8rpx;
}

.hotel-address {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
}

.hotel-features {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15rpx;
}

.feature-item {
  font-size: 24rpx;
  color: #666;
  margin-right: 20rpx;
  margin-bottom: 8rpx;
}

.feature-item:before {
  content: "✓";
  color: #1296db;
  margin-right: 5rpx;
}

.hotel-rating {
  display: flex;
  align-items: center;
}

.rating-score {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff9500;
  margin-right: 10rpx;
}

.rating-desc {
  font-size: 24rpx;
  color: #ff9500;
  background-color: rgba(255, 149, 0, 0.1);
  padding: 4rpx 10rpx;
  border-radius: 6rpx;
  margin-right: 15rpx;
}

.review-count {
  font-size: 24rpx;
  color: #999;
}

.load-more, .loading {
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #999;
}

.empty-tips {
  text-align: center;
  padding: 80rpx 0;
  font-size: 28rpx;
  color: #999;
}
</style> 